import { Button, Card } from "antd";
import * as echarts from "echarts";

import { useEffect, useRef, useState } from "react";

const Pie: React.FC = () => {
  // 表格所在的div的ref
  const contariner = useRef<any>(null);
  // 表格配置项options
  const [options] = useState({
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 250],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: "电器" },
          { value: 38, name: "书籍" },
          { value: 32, name: "家具" },
          { value: 30, name: "家居" },
          { value: 28, name: "饰品" },
        ],
      },
    ],
  });

  // 点击修改表格项options内容
  const update = () => {
    // 更新表格内容 先注销掉已有的表格 再重新初始化
    echarts.init(contariner.current).dispose();
    initCharts();
  };

  // 初始化表格的函数
  const initCharts = () => {
    const chart: any = echarts.init(contariner.current);
    chart.setOption(options);
  };

  // 页面加载时候初始化表格
  useEffect(() => {
    initCharts();
    // 表格初始化了
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div>
      <Card>
        <Button type="primary" onClick={update}>
          更新内容
        </Button>
      </Card>

      <Card title="柱状图">
        <div
          ref={contariner}
          style={{ width: "1550px", height: "580px" }}
        ></div>
      </Card>
    </div>
  );
};

export default Pie;
